<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D位移</title>
    <style>
        /*2d平移  === 相对定位*/
        /*transform: translate(50px,50px);*/
        /*2d 缩放  小于1 缩小，大于1 放大*/
        /*transform: scale(1.5);*/
        /*2d  倾斜   角度单位 deg*/
        /*transform: skew(45deg,10deg);*/
        /*2d 旋转  角度单位 deg*/
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            margin: 0px auto;
            /*2d平移  === 相对定位*/
            transform: translate(50px,50px);
            /*2d 缩放  小于1 缩小，大于1 放大*/
            transform: scale(1.5);
            /*2d  倾斜   角度单位 deg*/
            transform: skew(45deg,10deg);
            /*2d 旋转  角度单位 deg*/
            transform: rotate(45deg);
        }
        #div2{
            width: 200px;
            height: 200px;
            background: blue;
            transform: rotate(35deg);
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>